<template>
<div class="about">
    <h1>个人信息</h1>
  </div>
<div>
<div class="userlist">
<ul border="0">
  <li><p>学号：<span>{{userlist.xuehao}}</span></p></li>
  <li><p>姓名：<span>{{userlist.name}}</span></p></li>
  <li><p>性别：<span v-if="userlist.sex==1">男</span><span v-else>女</span></p></li>
  <li><p>年龄：<span>{{userlist.age}}</span></p></li>
  <li><p>系院：<span>{{userlist.yuanxi}}</span></p></li>
  <li><p>班级：<span>{{userlist.banji}}</span></p></li>
  <li @click="gouser(userlist.xuehao)">查看更多</li>
</ul>
<div class="grbtns">
    <el-button type="primary" @click="unUser">编辑</el-button>
	<el-button type="info" @click="getout">退出登录</el-button>
</div>
    
</div>
</div>
</template>

<script>
    export default{
        name:"AboutCom",
        props:{
           userlist:{
               type:Array,
           }
        },
        // data(){
        //    return{
        //      userDatass:[]
        //    }
        // }
        methods:{
            //查看更多个人信息
            gouser(userName){
                console.log("查看更多"+userName)
                this.$router.replace('/user')
            },
            //编辑个人信息
            unUser(){
                console.log("编辑") 
            },
            //退出登录
            getout(){
                //清除token
                localStorage.removeItem('token')
                this.$router.replace('/')
                this.$router.go(0)
            }
        }
    }
</script>

<style>
.about{
    background-color: #42b983;
}

.userlist{
    /* background-color: #42b983; */
}
.userlist ul{
    width:70%;
    margin:0 auto;
}
.userlist li{
    height:30px;
    line-height:30px
}
.userlist li:last-child{
    text-align: center;
}
.userlist li:nth-child(odd){
    background-color:#E0E0E0;
}
.userlist li:nth-child(even){
    background-color:#f0f0f0;
}
.userlist li:hover{
    background-color:#FCFCFC;
}

.grbtns{
    text-align: center;
    margin:20px 0;
    /* background-color:red; */
}
</style>